<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>科转详情</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css" />
    <style>


        .login-header {
            color: rgba(0, 0, 0, .85) !important;
            padding: 2% 0;
            text-align: center;
        }

        .layui-text em,
        .layui-word-aux {
            color: #ef0909 !important;
            padding: 0 5px !important;
        }

        .layui-input-block {
            margin-left: 0;
            min-height: 46px;
        }

        p {
            font-size: 20px;
        }

        .imgbox {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .imgbox img {
            width: 30%;
            height: 30%;
        }

        .tabs {
            display: flex;
            flex-direction: column;
        }

        .tab-nav {
            list-style-type: none;
            padding: 0;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-evenly;
            font-size: 20px;
        }

        .tab-nav li {
            width: 140px;
            height: 40px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tab-nav a {
            text-decoration: none;
            color: black;
        }

        .tab {
            display: none;
            padding: 20px;
        }

        .active {
            display: block;
        }

        .container {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            font-size: 15px;
            margin-bottom: 20px;
        }

        .firstbox,
        .secondbox,
        .thirdbox,
        .fourthbox {
            padding: 10px;
            margin-bottom: 20px;
            /* 	border: 1px solid lightgrey;
			border-radius: 1%; */
        }

        .firstfloor {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 2px 10px 2px 0px;
            border-radius: 5%;
            justify-content: space-between;
        }

        .tagbox {
            height: 20px;
            background-color: #26B2AE;
            text-align: center;
            padding: 2px 10px 2px 10px;
            border-radius: 5%;
        }

        .secondfloor {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .thirdbox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }

        figure a {
            /* background-color: #26B2AE; */
            width: auto;
            /* height: 50px; */
            /* line-height: 50px; */
			color: blue;
            text-align: center;
            margin-top: 10px;
            padding: 0 5px;
            box-sizing: border-box;
        }

        figure {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 10px 0 0;
        }

        .fivethbox {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fivethbox button {
            width: auto;
            padding: 0 10px;
            height: 44px;
        }

        @media screen and (min-width: 800px) {
            .layui-form-label {
                width: 86px !important;
            }
        }

        .content_box {
            max-width: 800px;
        }

        .state {
            color: rgba(236, 114, 13, 0.801);
        }

		.layui-elem-field legend{
			font-size: 16px !important;
		}
		.layui-field-title{
			margin-bottom: 5px;
		}

    </style>
</head>

<body>
    <div class="body">
        <div class="login-header">
            <h2 style="font-weight: 400;letter-spacing: 3px; font-size: 1.5rem">科转详情</h2>
        </div>
        <div class="layui-fluid content_box">
            <div class="tabs">
                <div class="tab-content" id="tab1">

                </div>
            </div>



			<fieldset class="layui-elem-field layui-field-title">
			  <legend>操作记录</legend>
			</fieldset>
			<div class="fourthbox">


			</div>
			<div class="fivethbox">
			    <button id="btn1"  class="layui-btn" onclick="btn1()">去上传</button>
			    <button id="btn2" class="layui-btn" onclick="btn2()">去审批</button>
			    <button id="btn3" class="layui-btn" onclick="btn3()">去选金额审批人</button>
			    <button id="btn4" class="layui-btn" onclick="btn4()">金额审批</button>
			    <button id="btn5" class="layui-btn" onclick="btn5()">去公示</button>
			    <button id="btn6" class="layui-btn" onclick="btn6()">去评估</button>
			    <button id="btn7" class="layui-btn"  onclick="btn7()">签订合同</button>
			    <button id="btn8" class="layui-btn" onclick="btn8()">去备案</button>
			    <button id="btn9" class="layui-btn" onclick="btn9()">去登记</button>
			    <button id="btn10" class="layui-btn"  onclick="btn10()">去上传扫描文件</button>
			</div>
        </div>



    </div>





    <script type="text/javascript" src="assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="assets/js/config.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

    <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

    <script id="TPL" type="text/html">
        <div class="container">
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>基础信息</legend>
			</fieldset>
            <div class="firstbox">
                <div style="margin-bottom: 10px;" class="firstfloor">
                    <div style="display:flex">
                        <div style="margin-right: 10px;" class="tagbox">
                            <span>{{d.knowledge_type_detail}}</span>
                        </div>
                        <div style="margin-right: 10px;" class="">
                            <span>{{d.name}}</span>
                        </div>
                    </div>
                    <div class="">
                        <span class="state" style="float: right;">{{d.stateTile}}</span>
                    </div>
                </div>
                <div style="margin-bottom: 10px;">
                    <span>知识产权号：{{d.knowledge_num}}</span>
                </div>
                <div style="margin-bottom: 10px;"><span>发明人：{{d.inventor}}</span></div>
                <div style="margin-bottom: 10px;" class="secondfloor"><span>所有权人：{{d.ownership}}</span><span  style="color: #26B2AE;">{{d.contract_type_info}}</span></div>
                <div style="margin-bottom: 10px;">
                    <span>二级单位：{{d.second_company}}</span>
                </div>
                <div style="margin-bottom: 10px;"><span>是否国家知识产权备案：{{d.is_intellectual_filings === 1 ? '已备案' : '未备案'}}</span></div>
                <div style="margin-bottom: 10px;"><span>技术市场是否登记：{{d.is_intellectual_filings === 1 ? '已登记' : '未登记'}}</span></div>
                <div style="margin-bottom: 10px;"><span>收益：{{d.conversion_type}}  {{d.conversion_get_money}}元 </span></div>
                <div style="margin-bottom: 10px;"><span>有效期限：{{d.knowledge_start_time}} - {{d.knowledge_end_time}}</span></div>
                <div style="margin-bottom: 10px;"><span>主完成人：{{d.main_finished_person_name}}  {{d.main_finished_person_phone}}</span></div>
                <div style="margin-bottom: 10px;"><span>是否为关联交易：{{d.is_connected_transaction}}</span></div>
            </div>
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>受让方</legend>
			</fieldset>
            <div class="secondbox">
                <div style="margin-bottom: 10px;"><span>单位名称：{{d.to_company_name}}</span></div>
                <div style="margin-bottom: 10px;"><span>统一社会信用代码：{{d.to_company_union_no}}</span></div>
                <div style="margin-bottom: 10px;"><span>单位法人：{{d.to_company_legal_person}}</span></div>
                <div style="margin-bottom: 10px;"><span>联系电话：{{d.to_company_legal_phone}}</span></div>
                <div style="margin-bottom: 10px;"><span>单位地址：{{d.to_company_addresss_area}}{{d.to_company_address_detail}}</span></div>
            </div>
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>附件下载</legend>
			</fieldset>
            <div class="thirdbox">
                <figure id="reqshow">
                    <a href={{d.req_file_doc}}>《WORD申请表》</a>
                </figure>
                <figure id="req_file_pdf">
                    <span></span>
                    <a href="{{d.req_file_pdf}}">《盖章后的PDF申请表》</a>
                </figure>
                <figure id="publicity_file_url">
                    <a href="{{d.publicity_file_url}}">《公示文件》</a>
                </figure>
                <figure id="contract_file_url">
                    <a href="{{d.contract_file_url}}">《合同》</a>
                </figure>
                <figure id="duty_free_file">
                    <a href="{{d.duty_free_file}}">《免税流程内容指导》</a>
                </figure>
                <figure id="all_file_pdf">
                    <a href="{{d.all_file_pdf}}">《所有资料扫描件》</a>
                </figure>
                <figure id="contract_sure_file_url">
                    <a href="{{d.contract_sure_file_url}}">《山西省技术合同认定登记申请表》</a>
                </figure>
                <figure id="notice_file_url">
                    <a href="{{d.notice_file_url}}">《专利转让分配通知单》</a>
                </figure>
            </div>

        </div>

    </script>

    <script id="TPS" type="text/html">
        <div class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{d.add_datetime}}</h3>
                <span>{{d.opt_name}}</span>  <span>{{d.opt_common}}</span>
            </div>
        </div>
    </script>
    <script>
        var id = getUrlParam('id');
        layui.config({
            base: 'assets/module/'
        }).use(['layer', 'jquery', 'form', 'laytpl', 'upload'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            var router = layui.router();
            var laytpl = layui.laytpl;

            $(document).ready(function () {
                let userMsg = localStorage.getItem("userMsg");
                userMsg = JSON.parse(userMsg)
                loadTabData(id)
                getoptlist(id)
                $('.fourthbox').empty()
                // 给所有的Tab链接添加点击事件
                function loadTabData(itemId) {
                    $.ajax({
                        url: serverUrl + 'Knowledge/getDetail.html',
                        type: 'POST',
                        data: {
                            id: itemId, // 动态改变tabState的值
                            user_id:userMsg.UserId,
                            department_id:Array.isArray(userMsg.department)?userMsg.department.join(','):userMsg.department
                        },
                        success: function (data) {
                            updatePageContent(data); // 假设这是个函数，用于更新页面内容
                        },
                        error: function (err) {
                            console.log(err);
                        },
                        contentType: 'application/x-www-form-urlencoded',
                        dataType: 'json'
                    });
                }

                // 示例函数，用于根据新数据更新页面内   容
                function updatePageContent(data) {

                    // 这里根据数据更新页面，类似于之前提供的动态生成内容的逻辑
                    // var dataArry = JSON.parse(data);
                    const dataList = data.obj;
                    var stateTile = '';
                    switch (dataList.state) {
                        case 2: stateTile = '待二级单位审批'; break;
                        case 1: stateTile = '待上传审批表盖章后附件'; break;
                        case 3: stateTile = '待选金额审批人'; break;
                        case 4: stateTile = '待金额审批'; break;
                        case 5: stateTile = '待交易公示'; break;
                        case 6: stateTile = '待评估'; break;
                        case 7: stateTile = '待签订合同'; break;
                    }
                    dataList.stateTile = stateTile
                    var getTpl = document.getElementById('TPL').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('view'); // 视图对象
                    // 渲染并输出结果
                    setTimeout(function () {
                        dataList.req_file_doc ? $('#reqshow').show() : $('#reqshow').hide();
                        dataList.notice_file_url ? $('#notice_file_url').show() : $('#notice_file_url').hide();
                        dataList.contract_sure_file_url ? $('#contract_sure_file_url').show() : $('#contract_sure_file_url').hide();
                        dataList.all_file_pdf ? $('#all_file_pdf').show() : $('#all_file_pdf').hide();
                        dataList.duty_free_file ? $('#duty_free_file').show() : $('#duty_free_file').hide();
                        dataList.contract_file_url ? $('#contract_file_url').show() : $('#contract_file_url').hide();
                        dataList.publicity_file_url ? $('#publicity_file_url').show() : $('#publicity_file_url').hide();
                        dataList.req_file_pdf ? $('#req_file_pdf').show() : $('#req_file_pdf').hide();
                        dataList.btn_state_one ? $('#btn1').show() : $('#btn1').hide();
                        dataList.btn_state_two ? $('#btn2').show() : $('#btn2').hide();
                        dataList.btn_state_three ? $('#btn3').show() : $('#btn3').hide();
                        dataList.btn_state_four ? $('#btn4').show() : $('#btn4').hide();
                        dataList.btn_state_five ? $('#btn5').show() : $('#btn5').hide();
                        dataList.btn_state_six ? $('#btn6').show() : $('#btn6').hide();
                        dataList.btn_state_seven ? $('#btn7').show() : $('#btn7').hide();
                        dataList.btn_state_eight ? $('#btn8').show() : $('#btn8').hide();
                        dataList.btn_state_nine ? $('#btn9').show() : $('#btn9').hide();
                        dataList.btn_state_ten ? $('#btn10').show() : $('#btn10').hide();
                    }, 100);
                    laytpl(getTpl).render(dataList, function (str) {
                        $('.tab-content').append(str);
                    });
                }
                function getoptlist(itemId) {
                    $.ajax({
                        url: serverUrl + 'Knowledge/getOptList.html',
                        type: 'POST',
                        data: {
                            id: itemId,
                        },
                        success: function (data) {
                            data.obj.data.forEach(item => {
                                var getTpl = document.getElementById('TPS').innerHTML; // 获取模板字符
                                var elemView = document.getElementById('view'); // 视图对象
                                laytpl(getTpl).render(item, function (str) {
                                    setTimeout(function () {
                                        $('.fourthbox').append(str);
                                    }, 200);
                                });
                            });
                        },
                        error: function (err) {
                            console.log(err);
                        },
                        contentType: 'application/x-www-form-urlencoded',
                        dataType: 'json'
                    });
                }
            });
        });
        function btn1() {
            window.location.href = `upfile.html?id=`+id+`&type=1`;
        }
        function btn2() {
            window.location.href = `checkapply.html?id=`+id+`&type=2`;
        }
        function btn3() {
            window.location.href = `checkmoney.html?id=`+id+`&type=3`;
        }
        function btn4() {
            window.location.href = `checkapply.html?id=`+id+`&type=4`;
        }
        function btn5() {
            window.location.href = `addpulicity.html?id=`+id+`&type=5`;
        }
        function btn6() {
            window.location.href = `estimate.html?id=`+id+`&type=6`;
        }
        function btn7() {
            window.location.href = `signcontract.html?id=`+id+`&type=7`;
        }
        function btn8() {
            window.location.href = `marketregister.html?id=`+id+`&type=8`;
        }
        function btn9() {
            window.location.href = `marketregister.html?id=`+id+`&type=9`;
        }
        function btn10() {
            window.location.href = `upfile.html?id=`+id+`&type=10`;
        }
    </script>
</body>

</html>